<template>
    111
    <div id="main"></div>
</template>
<script>
import *  as  echarts from 'echarts'

export default {
    name: 'transform1',
    mounted() {
        let myChart = echarts.init(document.getElementById('main'),null,{
            width: 900,
            height: 400
        })
        let option = {
            tooltip: {
                formatter: function (params) {
                    let tooltip = '';
                    params.value.forEach(param => {
                        tooltip += `<div>${param}</div>`;
                    });
                    return tooltip;
                }
            },
            legend: {
                
            },
            xAxis: {
                type: 'category',
                // 坐标轴刻度标签的显示间隔。
                interval: 0,
                // 坐标轴刻度标签的旋转角度。
                axisLabel: {
                    rotate: 30
                }
            },
            yAxis: {
                type: 'value',
            },
            dataset: [
                {
                    dimensions: ['name', 'age', 'profession', 'score', 'date'],
                    source: [
                        [' Hannah Krause ', 41, 'Engineer', 314, '2011-02-12'],
                        ['Zhao Qian ', 20, 'Teacher', 351, '2011-03-01'],
                        [' Jasmin Krause ', 52, 'Musician', 287, '2011-02-14'],
                        ['Li Lei', 37, 'Teacher', 219, '2011-02-18'],
                        [' Karle Neumann ', 25, 'Engineer', 253, '2011-04-02'],
                        [' Adrian Groß', 19, 'Teacher', 111, '2011-01-16'],
                        ['Mia Neumann', 71, 'Engineer', 165, '2011-03-19'],
                        [' Böhm Fuchs', 36, 'Musician', 318, '2011-02-24'],
                        ['Han Meimei ', 67, 'Engineer', 366, '2011-03-12']
                    ]
                },
                {
                    transform: {
                        type: 'sort',
                        config: [
                            // 对两个维度按声明的优先级分别排序。
                            { dimension: 'profession', order: 'desc' },
                            { dimension: 'score', order: 'desc' }
                        ],
                        print: true                        
                    }
                }
            ],
            series: {
                type: 'bar',
                encode: {
                    x: 'name',
                    y: 'score',
                },
                datasetIndex: 1
            }
        };

        myChart.setOption(option)
    }
}
</script>
<style scoped>

</style>